<template>
    <h1>{{myname }}</h1>
    <h1>数字：{{count}}</h1>
    <h1>计算属性：{{countDouble}}</h1>
    <button @click="say">改变</button>

</template>

<script >
import {ref,reactive,computed,toRefs,
  onMounted,onBeforeUpdate,onUpdated,
  onBeforeUnmount,onUnmounted,
  watch
} from 'vue'

  export default {
    setup(){
      let myhobby=ref("游戏");

      // reactive创建的数据和方法
        let state=reactive({
          count:88,
          myname:"小王",
          arr:["吃","喝","玩","乐"],
          say(){
            console.log(111)
            state.myname="小李";
            myhobby.value="睡觉";
          },
          countDouble:computed(()=>state.count*2)
        })
        // 组件挂载完成后
        onMounted(()=>{
          console.log("组件挂载完成")
        })
        // vue3的监听器
        // 监听ref创建的数据变化
        watch(myhobby,(newVal,oldVal)=>{
            // newVal 新的值
            // oldVal 旧的值
            console.log(newVal,oldVal)
        })
        // 监听reactive创建的数据
        // 监听reactive的数据 用箭头函数返回值写法
        watch(()=>state.myname,(newVal,oldVal)=>{
            console.log("--",newVal,oldVal)
        })

        // 组件更新前
        onBeforeUpdate(()=>{
          console.log("组件更新前")
        })
        // 组件更新后
        onUpdated(()=>{
           console.log("组件更新后")
        })
        // 组件卸载前
        onBeforeUnmount(()=>{
           console.log("组件卸载前")
        })
        // 组件卸载后
         onUnmounted(()=>{
            console.log("组件卸载后")
         })
      return {
        // toRefs() 将普通对象 转为响应式数据
          ...toRefs(state)
      }
    }
  }
</script>
